<template >
  <div class="loginBox">
    <h2>欢迎使用</h2>
    <el-form
        ref="loginRefForm"
        style="max-width: 600px"
        :model="user"
        :rules="loginRules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
    >
      <el-form-item label="账号" prop="loginAct">
        <el-input v-model="user.loginAct" />
      </el-form-item>

      <el-form-item label="密码" prop="loginPwd">
        <el-input  type="password" v-model="user.loginPwd" />
      </el-form-item>

      <div>
        <el-checkbox v-model="user.rememberMe" label="记住我" size="large" />
      </div>
      <div style="text-align: center">
        <el-button type="primary" class="btn" @click="login">
          登录
        </el-button>
      </div>

    </el-form>
  </div>


</template>

<script>
import {doGet, doPost} from "@/http/httpRequest";
import {clearToken, messageTip} from "@/util/utils";

export default {
  name: 'LoginView',
  props: {
    msg: String
  },
  data(){
    return {
      user:{},
      rememberMe: false,
      //验证规则对象 验证标签中prop指定的属性
      loginRules:{
        //验证账号登录字段
        loginAct: [
          { required: true, message: '请输入登录账号', trigger: 'blur' },
        ],
        //验证密码
        loginPwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      },
    }
  },
  methods:{
    login(){
      //每次登录时，清空token
      clearToken();
      //检查ref = loginRefForm的验证规则是否通过【valid属性代表是否通过】
      this.$refs.loginRefForm.validate( (valid) => {
        if (valid){
          //发送axios请求 【由于发送的是json对象 后端要必须使用@RequestBoby接收，所以改用表单对象方式传递】
          let formData = new FormData();
          formData.append("loginAct",this.user.loginAct)
          formData.append("loginPwd",this.user.loginPwd)
          formData.append("rememberMe",this.user.rememberMe)
          doPost("/login",formData).then((res) =>{
            //提示
            if (res.data.code >= 600) {
              messageTip(res.data.msg,"error");
              return;
            }
            messageTip("登录成功","success");

            //token的保存
            if (this.user.rememberMe){
              window.localStorage.setItem("token", res.data.data)
            }else {
              window.sessionStorage.setItem("token", res.data.data);
            }
            //路由跳转
            //this.$router.push("/hello") //只能跳转父子路由
            window.location.href = "hello";
          })
        }
      });
    },
    freeLogin(){
      let token =  window.localStorage.getItem("token");
      if (!token){
        return;
      }
      //发送请求 校验
      doGet("/api/freeLogin",{}).then(res =>{
        if (res.data.code === 200){
          //跳转页面
          window.location.href = "/hello"

        }
      })
    }
  },
  mounted() {
    this.freeLogin();
  }
}
</script>



<style >
  * {
    margin: 0;
    padding: 0;
  }

  a {
    text-decoration: none;
  }

  input,
  button {
    background: transparent;
    border: 0;
    outline: none;
  }

  body {
    height: 100vh;
    background: linear-gradient(#141e30, #243b55);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #03e9f4;
  }

  .loginBox {
    width: 400px;
    height: 350px;
    background-color: #0c1622;
    margin: 100px auto;
    border-radius: 10px;
    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6);
    padding: 40px;
    box-sizing: border-box;
  }

  h2 {
    text-align: center;
    color: aliceblue;
    margin-bottom: 30px;
    font-family: 'Courier New', Courier, monospace;
  }


  .item input {
    width: 100%;
    height: 100%;
    color: #fff;
    padding-top: 20px;
    box-sizing: border-box;
  }

  .item input:focus+label,
  .item input:valid+label {
    top: 0px;
    font-size: 2px;
  }

  .item label {
    position: absolute;
    left: 0;
    top: 12px;
    transition: all 0.5s linear;
  }

  .btn {
    padding: 10px 20px;
    margin-top: 20px;
    color: #03e9f4;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  .btn:hover {
    border-radius: 5px;
    color: #fff;
    background: #03e9f4;
    box-shadow: 0 0 5px 0 #03e9f4,
    0 0 25px 0 #03e9f4,
    0 0 50px 0 #03e9f4,
    0 0 100px 0 #03e9f4;
    transition: all 300ms linear;
  }

</style>